<template>
	<view class="page user">
		<view class="zuview">
			<text class="zuti">您的租赁申请已提交</text>
			<text class="yumiao">请于两日内完成支付费用</text>
		</view>

		<view class="liview two">
			<view class="zhi zhitwo">
				<text class="zhinamethree">付款信息：</text>
				<view class="gview ml">
					<text class="rval">{{info.value.name||''}}</text>
					<!-- <image src="/static/icon/rfan.png" class="rfan"></image> -->
				</view>
			</view>
			<view class="zhi zhitwo">
				<text class="zhinamethree">开户银行：</text>
				<view class="gview ml">
					<text class="rval">{{info.value.bank||''}}</text>
					<!-- <image src="/static/icon/rfan.png" class="rfan"></image> -->
				</view>
			</view>
			<view class="zhi zhitwo">
				<text class="zhinamethree">开户账号：</text>
				<view class="gview ml">
					<text class="rval">{{info.value.bankCode||''}}</text>
					<!-- <image src="/static/icon/rfan.png" class="rfan"></image> -->
				</view>
			</view>
			<view class="zhi zhitwo">
				<text class="zhinamethree">待付款金额：</text>
				<view class="gview ml">
					<text class="rval">{{'¥'+info.total||'0'}}</text>
					<!-- <image src="/static/icon/rfan.png" class="rfan"></image> -->
				</view>
			</view>
		</view>
		<view class="liview two">
			<wd-cell title="上传支付截图" style="padding-left: 0;" title-width="100px" prop="photos" :rules="[{ required: true, message: '上传支付截图或电子订单' }]" >
				<wd-upload :limit="1" :file-list="info.photos" :action="fileUploadAction" :header="header"  @success="handleFileSuccess" :before-remove="beforeRemove"></wd-upload>
			</wd-cell>
		</view>
		<view class="shenview" @click="getbtn">
			已支付
		</view>
	</view>
</template>

<script setup >
	import { ref,reactive } from 'vue';
	import userApiService from "@/api/user.js"
	import { useMessage } from '@/uni_modules/wot-design-uni'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import { API_BASE_URL } from "@/utils/request.js"
	const fileUploadAction = ref(`${API_BASE_URL}/tbx/sys/common/upload`)
	const header = ref({
		'X-Access-Token': uni.getStorageSync( 'etoken' )
	})
	const value = ref('')
	var modelValue = ref(true)
	let info = reactive({
		code:'',
		value:{},
		photos:[],
		total:0
	})
	onLoad((e)=>{
		if(e.newcode){
			info.code = e.newcode
			console.log(info.code)
		}
		if(e.total){
			info.total = e.total
		}

		getinit()
	})
	const handleFileSuccess  = ({fileList}) =>{

		let list = ""
		fileList.map(({response}) =>{
			try{
				const fileRes = JSON.parse(response)
				list = `${API_BASE_URL}/tbx/${fileRes.message}`
			}catch (err){
				console.error("返回的格式不正确！", response)
			}
		})
		info.photos = list
	}
	function beforeRemove(e){
		info.photos = []
	}
	function handleChange(){

	}
	function getbtn(){
		console.log(info.photos)
		if(!info.photos||info.photos==''){
			uni.showToast({
				icon:"none",
				title : "请上传图片",
				duration: 2000
			})
			return false;
		}

		userApiService.applyedit({
			id:info.code,
			pay_img:info.photos,
			is_pay:'Y',
			apply_status:'2'
		}).then((res)=>{
			console.log(res)

			uni.showToast({
				icon:"none",
				title : "操作成功"
			})
			setTimeout(() => {
				// uni.navigateTo({
				// 	url: `/pages/mine/Applylist`
				// })
				uni.switchTab({ url: '/pages/index/application' })
			}, 500)
		})
	}
	function getinit(){

		userApiService.cuPay({
			code:"00"
		}).then((res)=>{
			console.log(res)
			info.value = res.records[0]
		})
	}

</script>
<style lang="scss" scoped>
	.user{
		background: #F7F8FC !important;
		height: 100vh;
		padding-bottom: 210rpx;
		.zuview{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 30rpx 30rpx 50rpx;
			.zuti{
				color: #333;
				font-size: 42rpx;
				font-weight: 500;
			}
			.yumiao{
				display: block;
				color: #666;
				font-weight: normal;
				margin-top: 20rpx;
			}
		}
		.liview{
			margin: 30rpx 30rpx 0;
			padding: 20rpx 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.kang{
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;

			}
			.dtwoview{
				margin-left: auto;
			}
			.dview{
				display: flex;
				flex-direction: row;
				align-items: center;

			}
			.zhi{
				display: flex;
				flex-direction: column;
				// margin-top: 22rpx;
				.zhiname{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 28rpx;
				}
				.zhinametwo{
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}
				.gview{
					display: flex;
					flex-direction: row;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 8rpx;
					.gitem{
						padding: 4rpx 15rpx;
						margin-right: 10rpx;
						border: 1rpx solid rgb(59, 141, 255);
						border-radius:10rpx;
						color: #3b8dff;
						font-size: 25rpx;
						font-weight: normal;
					}
					.pirce{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
					}
				}
				.rval{
					font-weight: 400;
					font-size: 28rpx;
					color: #666;
				}
				.rfan{
					margin-left: 12rpx;
					width: 30rpx;
					height: 30rpx;

				}
			}
			.zhitwo{
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 1rpx solid #eee;
				padding: 30rpx 0;
				.zhinamethree{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
				.gview{
					margin-top: 0;
					// margin-left: auto;
					display: flex;
					flex-direction: row;
					align-items: center;


				}
			}
			.zhitwo:last-child{
				border-bottom: none;
			}
			.zhithree{
				display: flex;
				flex-direction: column;
			}
			.xieyi{
				font-weight: 400;
				font-size: 24rpx;
				color: #111111;
			}
		}
		.ml{
			margin-left: auto;
		}
		.two{
			.zhi{
				.zhiname{
					color: #333;
					font-weight: 500;
				}
			}
			.zhi:first-child{
				margin-top: 0;
			}
		}
	}
	.xieyiview{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 30rpx;
		.quan{
			width: 40rpx;
			margin-right: 20rpx;
			height: 40rpx;
		}
		.yiname{
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}
	}
	.shenview{
		height: 88rpx;
		background: #597FE8;
		border-radius: 44rpx;
		margin:200rpx 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.zubot{
		position: fixed;
		height: 200rpx;
		background-color: #fff;
		background-color: #fff;
		bottom: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// padding: 0 30rpx;
		justify-content: center;

		.tyi{
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: center;
			margin-bottom: 15rpx;

		}
		.tybtn{
			height: 88rpx;
			width: 94%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #3b8dff;;
			color: #fff;
			font-size: 30rpx;
			border-radius: 10rpx;
		}
	}
	.zhinamethree{
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
	}

</style>
